<template>
  <div class="exception">
    <div class="img">
      <img :src="config.img" />
    </div>
    <div class="content">
      <h1>{{ config.title }}</h1>
      <div class="desc">{{ config.desc }}</div>
      <div class="action">
        <a-button type="primary" @click="handleToHome">返回首页</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'

interface IConfig {
  img: any
  title: string
  desc: string
}

export default defineComponent({
  name: 'Exception',
  props: {
    type: {
      type: String,
      // validator: function (value: string) {
      //   // 这个值必须匹配下列字符串中的一个
      //   return ['403', '404', '500'].indexOf(value) !== -1
      // },
      default: '404',
    },
  },
  setup(prop) {
    let pageConfig = null
    const router = useRouter()
    const handleToHome = () => {
      router.replace({ name: 'home' })
    }
    if ((prop as any).type === '403') {
      pageConfig = {
        img: require('@/assets/img/exception/403.svg'),
        title: '403',
        desc: '抱歉，你无权访问该页面',
      }
    } else if ((prop as any).type === '404') {
      pageConfig = {
        img: require('@/assets/img/exception/404.svg'),
        title: '404',
        desc: '抱歉，你访问的页面不存在或仍在开发中',
      }
    } else {
      pageConfig = {
        img: require('@/assets/img/exception/500.svg'),
        title: '500',
        desc: '抱歉，服务器出错了',
      }
    }
    const config = reactive<IConfig>(pageConfig)

    return {
      config,
      handleToHome,
    }
  },
})
</script>

<style lang="less" scoped>
.exception {
  min-height: 500px;
  height: 80%;
  align-items: center;
  text-align: center;
  padding-top: 150px;
  .img {
    display: inline-block;
    padding-right: 52px;
    zoom: 1;
    img {
      height: 360px;
      max-width: 430px;
    }
  }
  .content {
    display: inline-block;
    flex: auto;
    h1 {
      color: #434e59;
      font-size: 72px;
      font-weight: 600;
      line-height: 72px;
      margin-bottom: 24px;
    }
    .desc {
      color: rgba(0, 0, 0, 0.45);
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px;
    }
  }
}

.mobile {
  .exception {
    margin-top: 30px;
    .img {
      padding-right: unset;

      img {
        height: 40%;
        max-width: 80%;
      }
    }
  }
}
</style>
